<style>
  .checkout-list-payment {
    margin: 15px 0;
    display: flex;
    column-gap: 10px;
    justify-content: center;
  }
</style>
<div class="serve-feature">
  <div class="m_feature product__media-title">
    <div class="media-title-list"><span>{% render 'icon-vat' %}</span><p>{{ section.settings.html_2 }}  </p></div>
    <div class="media-title-list"><span>{% render 'icon-warranty' %}</span><p> {{ section.settings.html_3 }} </p></div>
    <div class="media-title-list"><span>{% render 'icon-shipping' %}</span><p> {{ section.settings.html_1 }}  </p></div>
  </div>
</div>
<ul class="checkout-list-payment" role="list">
  {%- for type in shop.enabled_payment_types -%}
  <li class="list-payment__item">
    {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
  </li>
  {%- endfor -%}
</ul>

{% schema %}
  {
    "name": "Serve feature",
    "settings": [
      {
        "type": "html",
        "id": "html_1",
        "default": "Free Shipping",
        "label": "html_1"
      },
      {
        "type": "html",
        "id": "html_2",
        "default": "VAT included",
        "label": "html_2"
      },
      {
        "type": "html",
        "id": "html_3",
        "default": "2-Year Warranty",
        "label": "html_3"
      }
    ],
    "presets": [
      {
        "name": "Serve feature"
      }
    ]
  }
{% endschema %}
